<template>
  <div>
    <a-card title="教师成绩录入">
      <a-alert
        message="请仔细核对成绩信息，提交后将无法修改"
        type="warning"
        show-icon
        style="margin-bottom: 16px"
      />
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="选择课程" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }">
          <a-select
            v-decorator="['course', { rules: [{ required: true, message: '请选择课程' }] }]"
            placeholder="选择课程"
            @change="handleCourseChange"
          >
            <a-select-option v-for="course in courses" :key="course.id" :value="course.id">
              {{ course.name }} ({{ course.code }})
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-table
          :columns="columns"
          :dataSource="students"
          :pagination="false"
          style="margin-top: 16px"
        >
          <template slot="score" slot-scope="text, record">
            <a-input-number
              v-decorator="[`score_${record.key}`, { 
                initialValue: record.score,
                rules: [
                  { required: true, message: '请输入成绩' },
                  { type: 'number', min: 0, max: 100, message: '成绩必须在0-100之间' }
                ]
              }]"
              :min="0"
              :max="100"
              :precision="1"
              style="width: 100px"
            />
          </template>
        </a-table>
        
        <a-form-item :wrapper-col="{ span: 12, offset: 4 }" style="margin-top: 16px">
          <a-button type="primary" html-type="submit">提交成绩</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '学号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '学院',
    dataIndex: 'college',
    key: 'college'
  },
  {
    title: '专业',
    dataIndex: 'major',
    key: 'major'
  },
  {
    title: '成绩',
    key: 'score',
    scopedSlots: { customRender: 'score' }
  }
]

const courses = [
  { id: 'C001', code: 'MATH102', name: '高等数学(下)' },
  { id: 'C002', code: 'PHYS101', name: '大学物理(上)' },
  { id: 'C003', code: 'EE201', name: '模拟电子技术' }
]

const students = [
  {
    key: '1',
    id: '20230101',
    name: '刘洋',
    college: '信息工程系',
    major: '计算机科学与技术',
    score: 85.5
  },
  {
    key: '2',
    id: '20230102',
    name: '赵宇',
    college: '信息工程系',
    major: '软件工程',
    score: 78.0
  },
  {
    key: '3',
    id: '20230103',
    name: '周婷',
    college: '电子工程学院',
    major: '电子信息工程',
    score: 92.5
  }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      columns,
      courses,
      students: []
    }
  },
  methods: {
    handleCourseChange(value) {
      console.log('选择课程:', value)
      // 实际应用中这里应该是API调用，获取该课程的学生列表
      this.students = [...students] // 模拟数据
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          const scores = {}
          Object.keys(values).forEach(key => {
            if (key.startsWith('score_')) {
              const studentKey = key.split('_')[1]
              scores[studentKey] = values[key]
            }
          })
          console.log('成绩数据:', scores)
          this.$message.success('成绩提交成功')
        }
      })
    }
  }
}
</script>